<template>
  <!-- 放置表单 -->
  <el-form
    label-width="120px"
    style="margin-left: 120px; margin-top: 30px"
    :rules="rules"
    ref="form"
    :model="userinfo"
  >
    <el-form-item label="姓名:" prop="username">
      <el-input style="width: 300px" v-model="userinfo.username" />
    </el-form-item>
    <el-form-item label="密码:">
      <el-input
        style="width: 300px"
        v-model="userinfo.password"
        type="password"
        :readonly="true"
      />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click.native="updateuserinfo">更新</el-button>
      <el-button @click.native="$router.push('/employees')">返回</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { getUserDetailById, saveUserDetailById } from '@/api/employess'
export default {
  // 组件名称
  name: 'loginSetting',
  // 组件参数 接收来自父组件的数据
  props: {},
  // 局部注册的组件
  components: {},
  // 组件状态值
  data () {
    return {
      userinfo: {
        username: '',
        password: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { min: 1, max: 5, message: '长度在 1 到 5 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    GetUserDetailById () {
      getUserDetailById(this.$route.query.id).then(res => {
        console.log(res);
        this.userinfo = res.data
      })
    },
    updateuserinfo () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          saveUserDetailById({ ...this.userinfo, id: this.$route.query.id }).then(res => {
            this.$message.success('更新成功')
          })
        } else {
          return false;
        }
      })
    },
  },
  created () {
    this.GetUserDetailById()
  }
}
</script>
<style scoped>
</style>